import React, { useEffect, useState } from "react";
import {
  DownloadOutlined,
  SignatureOutlined,
  CopyOutlined,
  DeploymentUnitOutlined,
  FileTextOutlined,
} from "@ant-design/icons";
import { Table, Button, Input, Spin } from "antd";
import callNet from "@/servers/callNet";
import { useQuery } from "@/shared/util";
import Markdown from '@/components/Markdown.jsx'
import { useHistory } from "react-router-dom";

import "./index.less";
import { marked } from "../createMeetingMinutes/marked";

export default function () {
  const history = useHistory();
  const [templateName, setTemplateName] = useState("");
  const [cueText, setCueText] = useState("");
  const [stepsContent, setStepsContent] = useState("");
  const [exampleContent, setExampleContent] = useState("");
  const [getStepLoading, setGetStepLoading] = useState(false);
  const [generateExampleLoading, setGenerateExampleLoading] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [loading, setLoading] = useState(false);
  let { templateId, pageStatus } = useQuery();

  useEffect(() => {
    if (pageStatus === "edit") {
      getTemplateData();
    }
  }, []);
  const getTemplateData = async () => {
    try {
      setLoading(true);
      const { TemplateInfo } = await callNet.get("/getTemplateInfo", {
        templateId,
      });
      let { templateName, cueText, stepsContent, exampleContent } =
        TemplateInfo;
      setTemplateName(templateName);
      setCueText(cueText);
      setStepsContent(stepsContent);
      setExampleContent(exampleContent);
    } catch (err) {
    } finally {
      setLoading(false);
    }
  };
  const getStep = async () => {
    if(!cueText.trim()){
      showMessage.warn("请填写您的要求")
      return
    }
    try {
      setGetStepLoading(true);
      const { content } = await callNet.post("/generateTemplateSteps", {
        cueText,
      });
      setStepsContent(content);
      showMessage.ok("生成成功！");
    } catch (err) {
    } finally {
      setGetStepLoading(false);
    }
  };

  const generateExample = async () => {
    if(!stepsContent.trim()){
      showMessage.warn("请填写模板推理步骤")
      return
    }
    try {
      setGenerateExampleLoading(true);
      const { content } = await callNet.post("/generateExample", {
        stepsContent,
      });
      setExampleContent(content);
      showMessage.ok("生成示例成功！");
    } catch (err) {
    } finally {
      setGenerateExampleLoading(false);
    }
  };

  const createFunc = async () => {
    if(!templateName.trim()){
      showMessage.warn("请填写模板名称")
      return
    }
    if(!cueText.trim()){
      showMessage.warn("请填写您的要求")
      return
    }
    if(!stepsContent.trim()){
      showMessage.warn("请填写模板推理步骤")
      return
    }
    if(!exampleContent.trim()){
      showMessage.warn("请先生成示例")
      return
    }
    try {
      setSubmitting(true);
      const params = {
        templateName,
        cueText,
        stepsContent,
        exampleContent,
        templateId: templateId || "",
      };
      const res = await callNet.post("/editTemplate", params);
      showMessage.ok("创建成功！");
      cancelFunc();
    } catch (err) {
    } finally {
      setSubmitting(false);
    }
  };

  const cancelFunc = () => {
    history.go(-1);
  };
  return (
    <div className="page-container">
      <div className="header">
        <h1>模板编辑</h1>
      </div>
      <Spin spinning={loading}>
        <div className="content">
          <div className="content-left">
            <Input
              placeholder="请在此输入模板名称"
              value={templateName}
              onChange={(e) => setTemplateName(e.target.value)}
            ></Input>
            <Input.TextArea
              placeholder="请在此处输入..."
              value={cueText}
              onChange={(e) => setCueText(e.target.value)}
            ></Input.TextArea>
            <Button
              type="link"
              icon={<DeploymentUnitOutlined />}
              loading={getStepLoading}
              onClick={getStep}
            >
              生成模板推理步骤
            </Button>
          </div>

          <div className="content-right">
            <div className="top">
              <h3>模板推理步骤</h3>
              <div className="step">
                <Input.TextArea
                  value={stepsContent}
                  onChange={(e) => setStepsContent(e.target.value)}
                ></Input.TextArea>
              </div>
              <span className="num-tag">{stepsContent?.length || 0}</span>

              <Button
                type="link"
                icon={<DeploymentUnitOutlined />}
                onClick={generateExample}
                loading={generateExampleLoading}
              >
                生成示例
              </Button>
            </div>
            <h3 className="sub-title">模板示例</h3>
            <div
              className="bottom"
              
            >
              <Markdown>{exampleContent}</Markdown>
              {/* <div className="actions">
              <Button type="default" icon={<FileTextOutlined />} size="small">
                日志
              </Button>
              <Button type="default" icon={<CopyOutlined />} size="small">
                复制
              </Button>
            </div> */}
            </div>
          </div>
        </div>

        <div className="footer">
          <Button onClick={cancelFunc}>取消</Button>
          <Button type="primary" onClick={createFunc} loading={submitting}>
            确认创建
          </Button>
        </div>
      </Spin>
    </div>
  );
}
